<template>
    <div class="wrap">
        <div class="ind_t">
            <ul class="tip_t">
                <li><span>币池总数量</span><span>{{coin.coin_stock_total | nubFixed}}</span></li>
                <li><span>总资产</span><span>{{coin.coin_issue_total | nubFixed}}</span></li>
                <li><span>今日挖币量</span><span>{{coin.coin_stock_day_total | nubFixed}}</span></li>
            </ul>
            <ul class="tip_b">
                <li><span>智能算力</span><span>{{coin.coin_j_total | nubFixed}}</span></li>
                <li><span>链接算力</span><span>{{coin.coin_d_total | nubFixed}}</span></li>
            </ul>
        </div>
        <ul class="m_nav">
            <router-link to="/rollin" tag="li"><span><i class="fa fa-repeat fa-lg" aria-hidden="true"></i></span><p>转入</p></router-link>
            <router-link to="/rollout" tag="li"><span><i class="fa fa-undo fa-lg" aria-hidden="true"></i></span><p>转出</p></router-link>
            <router-link to="/ltrade" tag="li"><span><i class="fa fa-refresh fa-lg" aria-hidden="true"></i></span><p>交易</p></router-link>
            <router-link to="/notice" tag="li"><span><i class="fa fa-truck fa-lg" aria-hidden="true"></i></span><p>公告</p></router-link>
            <!-- <router-link to="/dvpt" tag="li"><span><i class="fa fa-file-text fa-lg" aria-hidden="true"></i></span><p>反馈</p></router-link> -->
        </ul>
        <tabbar :num ="num"></tabbar>
    </div>
</template>
<script>
    import tabbar from "./../../components/tabbar.vue"
    export default {
        data(){
            return {
                headText:'我是一个组件',
                num: 0,
                coin: {     //数据信息
                    coin_d_total: '0',
                    coin_issue_total:'0',
                    coin_j_total:'0',
                    coin_stock_day_total:'0',
                    coin_stock_total:'0',
                },  
            }
        },
        mounted(){
            this.initialize() //拉取信息
        },
        methods:{
            //获取数据信息
            initialize(){
                let _this = this;
				this.Tools.AXIOS({
                    url: 'index/index',
                    success: function (res) {
                        _this.coin = res.data.data;
                    }
                })
            },
        },
		components: {
			tabbar
		},
    }
</script>
<style scoped>
    .ind_t{ width: 100%; height: 6rem; background: url('./../../assets/img/i_bg.jpg') no-repeat; background-size: cover; overflow: hidden; position: relative;}
    .ind_t ul{ display: flex; color: #fff; justify-content: space-around;}
    .ind_t ul li span{ display: block; text-align: center; font-size: .36rem; line-height: .7rem;}
    .ind_t .tip_t{ margin-top: 2.5rem;}
    .ind_t .tip_b{ width: 100%; padding: .2rem 0 .1rem; background-color: rgba(67,100,125,.5); position: absolute; left: 0; bottom: 0;}
    .ind_t .tip_b span{ font-size: .3rem; line-height: .7rem;}
    /* .ind_t .tip_b span:nth-of-type(2),.ind_t .tip_t span:nth-of-type(2){color: #FD9709;} */
    .m_nav{ width: 100%; overflow: hidden; background: #fff; padding: .2rem 0 .5rem;}
    .m_nav li{ width: 25%; float: left; margin: .5rem 0 .2rem;}
    .m_nav li span{ width: 1rem; height: 1rem; display: block; text-align: center; background: #000; border-radius: 100px; margin: 0 auto;}
    .m_nav li span i{ color: #fff; line-height: 1.1rem;}
    .m_nav li p{ text-align: center; margin-top: .2rem; font-size: .3rem;}
    .m_nav li:nth-of-type(1) span{ background: #FBADAB;}
    .m_nav li:nth-of-type(2) span{ background: #7FD3F7;}
    .m_nav li:nth-of-type(3) span{ background: #9A5E5D;}
    .m_nav li:nth-of-type(4) span{ background: #61DC9D;}
    .m_nav li:nth-of-type(5) span{ background: #C3A251;}
    .m_nav li:nth-of-type(6) span{ background: #ECC075;}
    .m_nav li:nth-of-type(7) span{ background: #CCA8D7;}
    .m_nav li:nth-of-type(8) span{ background: #8A6FAB;}
</style>